<script setup lang="ts">
import { ref, useTemplateRef, onMounted } from 'vue'
import AddDialog from './components/AddDialog.vue'
import { querySiteList, insertSite } from '@/api/siteHistory.ts'
import type { SiteHistoryView, SiteHistoryAddDTO } from '@/interface'

const loading = ref(false)
const dataList = ref<SiteHistoryView[]>([])
const getSiteHistoryDataList = async () => {
  loading.value = true
  const result = await querySiteList()
  loading.value = false
  if (Array.isArray(result)) {
    dataList.value = result
  }
}
onMounted(getSiteHistoryDataList)

const handleOpen = (url: string) => {
  window.open(url, '_blank')
}

const dialogRef = useTemplateRef<InstanceType<typeof AddDialog>>('dialogRef')
// 打开新增站点的弹窗
const openAddSiteDialog = () => {
  if (!dialogRef.value) return
  dialogRef.value.open()
}

const handleSubmit = async (form: SiteHistoryAddDTO) => {
  await insertSite(form)
  await getSiteHistoryDataList()
}
</script>

<template>
  <div class="utils-container base-container" v-loading="loading">
    <div class="utils-row">
      <div
        class="row-card"
        v-for="item in dataList"
        :key="item.id"
        @click="handleOpen(item.url)"
      >
        <div class="card-img">
          <img :src="item.icon" alt="xfxj" />
        </div>
        <div class="card-info">
          <div class="title-text">
            <strong>{{ item.title }}</strong>
          </div>
          <el-popover
            placement="bottom"
            :content="item.description"
            width="260"
          >
            <template #reference>
              <div class="cont-text">{{ item.description }}</div>
            </template>
          </el-popover>
        </div>
      </div>
      <div class="row-card row-card-last" @click="openAddSiteDialog">
        <el-icon size="25"><Plus /></el-icon>
      </div>
    </div>
  </div>
  <AddDialog ref="dialogRef" @on:submit="handleSubmit" />
</template>

<style scoped lang="scss">
.utils-container {
  overflow: auto;
  position: relative;

  .utils-row {
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    padding: 20px;

    .row-card {
      background: rgba(244, 244, 244, 0.02);
      border: 2px solid #282828;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 20px;
      cursor: pointer;
      transition-property: color, background-color, border-color,
        text-decoration-color, fill, stroke, opacity, box-shadow;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 0.5s;
      --size: 40px;

      &:hover {
        border-color: var(--xfxjPrimary);
      }

      .card-img {
        width: var(--size);
        height: var(--size);
        background: rgba(128, 128, 128, 0.1);
        overflow: hidden;

        > img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .card-info {
        width: calc(100% - var(--size));
        height: 100%;
        overflow: hidden;

        .title-text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: block;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          word-break: break-all;
        }

        .cont-text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: block;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          word-break: break-all;
        }
      }
    }

    .row-card-last {
      justify-content: center;
      opacity: 0.1;
      border: 2px dashed #fff;

      &:hover {
        opacity: 1;
      }
    }
  }
}
</style>
